<template>
	<div id='container' ref='container'></div>
</template>

<script>
	import echarts from 'echarts'
	let echart = null
	export default {
		props : {
			color : {
				type : Array,
				default : ['#f98469','#9a6efe','#f9bb69','#8ecb83','#6e9cfe','#6eebfe','#fe6ebf','#83cbaa','#f96969','#4850f3']
			},
			legend : {
				type : Array,
				default : []
			},
			xAxis : {
				type : Array,
				default : []
			},
			series : {
				type : Array,
				default : []
			}
		},
		data() {
			return {
				
			}
		},
		
		methods : {
			draw : function() {
				let series = Object.assign([], this.series)
				series.forEach(v => {
					v.type = 'line'
					v.stack = '总量'
				})
				
				let option = {
					tooltip: {
						trigger: 'axis'
					},
					
					color : this.color,
					
					legend: {
						left : '10%',
						top : 0,
						data : this.legend
					},
					
					grid : {
						top : '80px'
					},
					
					yAxis : [
						{ 
							name : '（元）',
							nameTextStyle : {
								color : '#66696e'
							},
							type : 'value', 
							axisLine : {
									lineStyle : {color : '#ebeef5'}
							},
							axisLabel : {
								color : '#66696e'
							}
						}
					],
					
					xAxis : {
						type : 'category',
						boundaryGap : false,
						axisLine : {
								lineStyle : {color : '#ebeef5'}
						},
						axisLabel : {
							color : '#66696e'
						},
						data : this.xAxis
					},
					
					series : series
				}
				
				echart.setOption(option, false)
			}
		},
		
		watch : {
			xAxis : function(){
				this.draw()
			},
			series : function(){
				this.draw()
			},
		},
		
		mounted () {
			
			echart = echarts.init(this.$refs.container)
			this.draw()
		}
	}
</script>

<style lang='less' scoped>
	#container{
		height:400px;
		padding:0px 20px;
	}
</style>
